<template>
  <xn-form-container :title="formData.id ? '编辑手牌' : '增加手牌'" :width="700" :visible="visible" :destroy-on-close="true"
    @close="onClose">
    <a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
      <a-form-item label="手牌类型：" name="handType" required>
        <a-select v-model:value="formData.handType" placeholder="请输入手牌类型">
          <a-select-option v-for="item in props.handTypeList" :value="item.id">{{ item.typeName
            }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="手牌号码：" name="name" required>
        <a-input v-model:value="formData.name" placeholder="请输入手牌名称" allow-clear />
      </a-form-item>
      <a-form-item label="手牌内码：" name="code">
        <a-input v-model:value="formData.code" placeholder="请输入手牌内码" allow-clear />
      </a-form-item>

      <!-- <a-form-item label="状态  00空闲  01停用 02 服务中 03 客人进场：" name="state">
				<a-input
					v-model:value="formData.state"
					placeholder="请输入状态  00空闲  01停用 02 服务中 03 客人进场"
					allow-clear
				/>
			</a-form-item>
			<a-form-item label="备注：" name="remark">
				<a-input v-model:value="formData.remark" placeholder="请输入备注" allow-clear />
			</a-form-item> -->
    </a-form>
    <template #footer>
      <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
      <a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
    </template>
  </xn-form-container>
</template>

<script setup name="bizHandForm">
import { cloneDeep } from 'lodash-es'
import { required } from '@/utils/formRules'
import bizHandApi from '@/api/biz/bizHandApi'
// 抽屉状态
const visible = ref(false)
const emit = defineEmits({ successful: null })
const formRef = ref()
// 表单数据
const formData = ref({})
const submitLoading = ref(false)
const props = defineProps({
  handTypeList: {
    type: Array
  }
})
// 打开抽屉
const onOpen = (record) => {
  visible.value = true
  if (record) {
    let recordData = cloneDeep(record)
    formData.value = Object.assign({}, recordData)
  }
}
// 关闭抽屉
const onClose = () => {
  formRef.value.resetFields()
  formData.value = {}
  visible.value = false
}
// 默认要校验的
const formRules = {}
// 验证并提交数据
const onSubmit = () => {
  formRef.value.validate().then(() => {
    submitLoading.value = true
    const formDataParam = cloneDeep(formData.value)
    bizHandApi
      .bizHandSubmitForm(formDataParam, formDataParam.id)
      .then(() => {
        onClose()
        emit('successful')
      })
      .finally(() => {
        submitLoading.value = false
      })
  })
}
// 抛出函数
defineExpose({
  onOpen
})
</script>
